<template>
  <div class="image-view" :style="cputdStyle">
    <template v-if="props.imageProps">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        :width="props.width"
        :height="props.height"
        :viewBox="boxViewVal"
      >
        <image
          v-for="(val, index) in props.imageProps.images"
          :key="index"
          :x="val.x"
          :y="val.y"
          :width="width"
          :height="height"
          :xlink:href="val.url"
          preserveAspectRatio="none"
        ></image>
      </svg>
    </template>
    <template v-else>
      <img class="img-style" :src="props.url" alt="" />
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
  url: {
    type: String,
    default: "",
  },
  imageProps: {
    type: Object,
    default: null,
  },
});

onMounted(() => {
  console.log(props);
});

const width = computed(() => {
  const cpl = props.imageProps;
  return props.width / (cpl.x ?? 1);
});

const height = computed(() => {
  const cpl = props.imageProps;
  return props.height / (cpl.y ?? 1);
});

const boxViewVal = computed(() => {
  return `0 0 ${props.width} ${props.height}`;
});

const cputdStyle = computed(() => {
  return { width: `${props.width}px`, height: ` ${props.height}px` };
});
</script>

<style lang="scss" scoped>
.image-view {
  display: flex;
}

.img-style {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
</style>
